<template>
	<view class="page">
		<view class="bg-white">
			<view class="triangle_border_down">
				<view class="sc-bg-blue"><span class="fr">
				<div class="headView">
					<open-data type="userAvatarUrl" class="icon"></open-data>
					<view class="icon"></view>
				</div>
				</span>青挚校友</view>
				<span class="sanjiao"></span>
			</view>

			<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" class="swiper-box sc-swiper ">
				<swiper-item v-for="(carousel,index) in carousels" :key="carousel.id">
					<view class="swiper-item">
						<image :src="carousel.imgPath" mode="aspectFill" />
						<view class="uni-swiper__dots-box uni-swiper__dots-nav" style="background-color: rgba(0, 0, 0, 0.3);">
							<view data-v-1e0c0787="" class="uni-swiper__dots-nav-item" style="color: rgb(255, 255, 255); width: 100%; text-align: left;"><span
								 class="fr">{{index+1}}/{{carousels.length}}</span>
								撬动校友经济，郑州如何发力？</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 数据 -->
		<view class="sc-jx-data u-f-ac bg-white padding10">
			<navigator url="../shenling-card/shenling-card" class="u-f1 u-f-ajc u-f-column">
				<span class="iconfont iconRedColor f28">&#xe626;</span>校友卡申领
			</navigator>
			<navigator url="../mingpian/mingpian" class="u-f1 u-f-ajc u-f-column">
				<span class="iconfont icon-mingpian f28 f-blue"></span>校友名片
			</navigator>
			<navigator url="../zhinan/zhinan" class="u-f1 u-f-ajc u-f-column">
				<span class="iconfont icon-zhinan1 iconDLanColor f28"></span>返校指南
			</navigator>
			<view class="u-f1 u-f-ajc u-f-column">
				<span class="iconfont icon-aixinjuanzeng iconRedColor f28"></span>爱心捐赠
			</view>
		</view>
		<!-- 新闻动态-->
		<view class="weui-cells_form  margin10-t bg-white">
			<view class="weui-cell weui-cell_access sbline">
				<view class="weui-cell__bd u-f u-f-ac ">
					<p class="f16">新闻动态</p>
				</view>
				<navigator url="/pages/news/news" hover-class="navigator-hover">
					<view class="weui-cell__ft f14">更多</view>
				</navigator>
			</view>
			<view class="weui-panel__bd sc-news">
				<navigator :url="'/pages/news/detail?id='+content.id" v-for="(content,index) in contents" :key="content.id" class="weui-media-box weui-media-box_appmsg">
					<view class="weui-media-box__hd ">
						<img class="weui-media-box__thumb" :src="content.imgThumbnail" alt="">
					</view>
					<view class="weui-media-box__bd">
						<h4 class="weui-media-box__title">{{content.title}}</h4>
						<view class="weui-media-box__desc u-f u-f-ac">
							<text class="u-f1">{{content.publishTime}}</text>
							<text class="u-f1 tar">阅读：{{content.viewNum}}</text>
						</view>
					</view>
				</navigator>
			</view>
		</view>
		<!-- 校友会活动-->
		<view class="weui-cells_form  margin10-t bg-white">
			<view class="weui-cell weui-cell_access sbline">
				<view class="weui-cell__bd u-f u-f-ac ">
					<p class="f16">校友会活动</p>
				</view>
				<navigator url="/pages/activity/index" hover-class="navigator-hover">
					<view class="weui-cell__ft f14">更多</view>
				</navigator>
			</view>
			<view>
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="0">
					<view id="demo1" class="scroll-view-item_H " v-for="activity in activitys" :key="activity.id">
						<view class="sc-card">
							<view class="img-box" style="height:35vw; background-size: cover; border-radius: 0;" :style="'background-image:url('+activity.posterPath+');'"></view>
							<!-- pic end -->
							<view class="f16 margin10">
								<span v-if="activity.signState=='报名已截止'" class="weui-btn weui-btn_mini b-green fr">
									{{activity.signNumAlready}} 人已报名
								</span>
								<span v-else class="weui-btn weui-btn_mini b-gray fr">报名已截止</span>
								{{activity.activityName}}
							</view>
							<view class="f14 f-gray margin10">
								{{activity.orgName}}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>

		</view>
		<!-- 校友风采-->
		<view class="weui-cells_form  margin10-t bg-white">
			<view class="weui-cell weui-cell_access sbline">
				<view class="weui-cell__bd u-f u-f-ac ">
					<p class="f16">校友风采</p>
				</view>
				<a href="javascript:;">
					<view class="weui-cell__ft f14">更多</view>
				</a>
			</view>

			<view class="uni-product-list sc-tplist">
				<view class="uni-product ">
					<view class="image-view">
						<image class="uni-product-image" style="border-radius: 0.3125rem 0.3125rem 0 0;" src="https://imgs.qunarzz.com/p/tts9/1908/e5/ae14cb05c5d23a02.png_640x360_d9633b29.png"></image>
					</view>
					<view class="bg-white">
						<view class="uni-product-title margin10-l ">张晶晶：女学霸的创业故事</view>
					</view>

				</view>
				<!-- end -->
				<view class="uni-product ">
					<view class="image-view">
						<image class="uni-product-image" style="border-radius: 0.3125rem 0.3125rem 0 0;" src="https://www.tsinghua.edu.cn/publish/newthu/newthu_cnt/intothu/picture/view5.jpg"></image>
					</view>
					<view class="bg-white">
						<view class="uni-product-title margin10-l ">邱勇：你说的创业精神大家都明白了吗的创业精神大</view>
					</view>
				</view>
				<!-- end -->
			</view>

		</view>
		<!-- 投票活动-->
		<view class="weui-cells_form  margin10-t bg-white">
			<view class="weui-cell weui-cell_access sbline">
				<view class="weui-cell__bd u-f u-f-ac ">
					<p class="f16">投票活动</p>
				</view>
				<navigator url="/pages/vote/list" hover-class="navigator-hover">
					<view class="weui-cell__ft f14">更多</view>
				</navigator>
			</view>

			<view class="weui-panel__bd sc-xyfc">
				<view class="weui-media-box weui-media-box_appmsg" v-for="vote in votes" :key="vote.id">
					<view class="weui-media-box__hd">
						<img class="weui-media-box__thumb" :src="vote.posterPath" alt="">
						<span class="sc-mark-rt" :class="vote.voteState=='已结束'?'bg-hui':'bg-green'">{{vote.voteState}}</span>
					</view>
					<view class="weui-media-box__bd">
						<h4 class="weui-media-box__title">{{vote.voteName}}</h4>
						<p class="weui-media-box__desc"><span class="iconfont icon-qizhi"></span> {{vote.orgName}}</p>
						<p class="weui-media-box__desc"><span class="iconfont icon-lishi"></span> {{vote.voteTimeEnd}} 投票截止</p>
						<p class="weui-media-box__desc f-green"><span class="iconfont icon-toupiao1"></span> 总票数：{{vote.voteNumAlready}}
							票</p>
					</view>
				</view>
			</view>

		</view>

		<!-- 最新加入 -->
		<view class="weui-cells_form  margin10-t bg-white">
			<view class="weui-cell weui-cell_access sbline">
				<view class="weui-cell__bd u-f u-f-ac ">
					<p class="f16">最新加入</p>
				</view>
				<navigator url="/pages/telbook/list" hover-class="navigator-hover">
					<view class="weui-cell__ft f14">更多</view>
				</navigator>
			</view>

			<view class="weui-media-box  weui-cell_access">
				<view class="home-data u-f-ac">
					<view class="u-f1 u-f-ajc u-f-column" v-for="wappUser in wappUsers" :key="wappUser.id">
						<view class="weui-media-box__hd weui-avatar-circle ">
							<img class="weui-media-box__thumb sc-my-img1" :src="wappUser.avatarUrl" alt=""></view>{{wappUser.nickName}}
					</view>

				</view>

			</view>

		</view>
		<!-- <tab-bar :current="0"></tab-bar> -->
	</view>
</template>
<script>
	// import tabBar from '../../components/tabBar.vue';
	export default {
		data() {
			return {
				carousels: [],
				contents: [],
				activitys: [],
				votes: [],
				wappUsers: []
			}
		},
		components: {
			// tabBar
		},
		onLoad() {
			this.getDatas()
		},
		methods: {
			getDatas() {
				let _self = this;
				console.log(this.$get())
				this.$get(this.$api.index, {}).then(res => {
					if (res.code == 0) {
						_self.carousels = res.carousels;
						_self.contents = res.contents;
						_self.activitys = res.activitys;
						_self.votes = res.votes;
						_self.wappUsers = res.wappUsers;
					} else {
						uni.showModal({
							title: '操作提示',
							content: res.msg,
							showCancel: false
						})
					}
				})
			}

		}
	}
</script>

<style>
	.scroll-Y {
		/* height: 300upx; */
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		/* height: 300upx; */
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 92%;
		/* 	height: 300upx;
		line-height: 300upx; */
	}

	.scroll-view-item_H .sc-card {
		margin: 0.625rem 0 0.625rem 0.625rem;
	}

	.scroll-view-item_H .weui-btn_mini {
		font-size: 22upx;
	}

	.fr {
		float: right;
	}

	.example-body-item {
		position: absolute;
		bottom: 1%;
		left: 6%;
		padding: 0 30upx;
		opacity: 1;
		color: #fff;
		z-index: 888;
	}

	.sc-swiper {
		height: 360upx;
		margin-top: -360upx;
	}

	.swiper-item {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		color: #fff;
	}

	.swiper-item image {
		width: 91%;
		height: 100%;
		margin: 20upx auto;
		border-radius: 20upx;
	}

	.uni-swiper__dots-box {
		position: absolute;
		bottom: 20upx;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: box-sizing;
		width: 100%;
	}


	.uni-swiper__dots-nav {
		bottom: 0;
		height: 70upx;
		justify-content: flex-start;
		background: rgba(0, 0, 0, 0.2);
		box-sizing: box-sizing;
		overflow: hidden;
		width: 91%;
		border-radius: 0 0 20upx 20upx;
	}

	.uni-swiper__dots-nav-item {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 28upx;
		color: #fff;
		box-sizing: box-sizing;
		margin: 0 30upx;
	}

	.page {
		background: #f7f7f7;
	}

	.placeholder {
		margin: 5px;
		padding: 0 0.1rem;
		text-align: center;
	}

	.placeholder img {
		width: 100%;
		height: 40vw;
		-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
	}

	.placeholder p {
		font-size: 25upx;
	}

	.page .weui-flex {

		align-items: center;
		padding: 10px;
		transition: all 0.3s ease 0s;
		display: -webkit-flex;
		display: -webkit-box;
		display: flex;
	}

	.page .weui-flex--item {
		-webkit-flex: 1 1 0;
		flex: 1 1 0;
	}

	.page .weui-cells {
		margin-top: 0;
	}

	.page .content {
		font-size: 16px;
		text-indent: 2em;
		margin: .5em auto;
		padding: 0 0.5em;
	}

	.sbline {
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
		margin-left: 0 16rpx;
	}

	.sc-bg-blue {
		background: #019FE8;
		height: 300upx;
		color: #fff;
		padding: 20upx;
		line-height: 80upx;
	}

	/*向下*/
	.triangle_border_down {
		position: relative;
		height: 500upx;
		top: 0;
	}

	.triangle_border_down .sanjiao {
		display: block;
		width: 0;
		height: 0;
		border-width: 20vw 50vw 0;
		border-style: solid;
		border-color: #019FE8 transparent transparent;
		position: absolute;
		left: 0;
	}

	.image-view {
		height: auto;
		margin: 0;
	}

	.uni-product-image {
		height: 35vw;
	}

	.sc-tplist .uni-product {
		padding: 0;
		margin: 20rpx;
		border-radius: 10upx;
		-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
	}
	.headView {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 120rpx;
		width: 120rpx;
		position: relative;
	}
	
	/**	
	*open-data 的头像做不了圆角	
	*这里是覆盖一个镂空的view在上面 镂空view的边界做成与周围背景颜色一样 做了伪圆角	
	**/
	
	.headView .icon {
		position: absolute;
		height: 120rpx;
		width: 120rpx;
		border-radius: 50%;
		border: 30rpx solid #019FE8;
	}
</style>
